<template>
	<view class="container">
		<view class="card">
			<!-- 价格/天区域 -->
			<view class="card-content">
				<view class="card-header">
					<view class="card-content-line"></view>
					<view class="card-content-title">
						价格/次
					</view>
					<view class="required-mark">
						*
					</view>
				</view>
				<view class="price-input-container">
					<text class="currency-symbol">¥</text>
					<u--input class="price-input" type="number" v-model="queryParams.price" inputAlign="right"
						placeholder="0" border="none" />
				</view>
			</view>

			<view class="description-section">
				<view class="card-header">
					<view class="card-content-line"></view>
					<view class="card-content-title">
						定制攻略描述
					</view>
					<view class="required-mark">
						*
					</view>
				</view>
				<view class="card-right-tags">
					<view class="tag-item" v-for="(template,index) in templateList" :key="index"
						:class="{ active: selectedTemplateIndex === index }" @click="selectTemplate(index)">
						{{ template.title }}
					</view>
				</view>
			</view>

			<view class="templateContent">
				<textarea class="description-textarea" v-model="selectedTemplateContent" placeholder="请输入定制攻略描述"
					:maxlength="50">
				</textarea>
				<view class="word-count">
					{{ selectedTemplateContent.length }}/50
				</view>
			</view>
		</view>

		<!-- <view class="footer-card">
			<view class="card-content">
				<view class="card-header">
					<view class="card-header-left">
						<view class="card-content-line"></view>
						<view class="card-content-title">
							出行人数
						</view>
					</view>
					<view class="people-counter">
						<view class="counter-btn" @click="decreasePeople">
							-
						</view>
						<view class="counter-number">{{ queryParams.peopleCount }}</view>
						<view class="counter-btn" @click="increasePeople">
							+
						</view>
					</view>
				</view>
			</view>
			<view class="card-footer">
				选填，不填默认出行人数不限
			</view>
		</view> -->

		<!-- 底部提示 -->
		<view class="footer-tip">
			标有 <text class="required-mark">*</text> 为必填项，请按照真实需求进行填写
		</view>

		<view class="bottom-buttons">
			<view class="button-group">
				<view class="save-button" @click="handleSave">
					<image src="/static/authentication/save.png" mode="" class="save-icon"></image>
					<text class="save-text">保存</text>
				</view>
				<view class="right-buttons">
					<view class="button clear-btn" @click="handleClear">
						清空
					</view>
					<view class="button publish-btn" @click="handlePublish">
						立即上架
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		clientServiceList,
		serviceType,
		serviceTypeList
	} from '@/request/api.js';
	export default {
		data() {
			return {
				selectedTemplateIndex: -1, // 当前选中的模板索引，-1表示未选中
				selectedTemplateContent: '', // 当前选中的模板内容
				queryParams: {
					price: '', // 初始值设为空字符串而不是0
					peopleCount: 0,
				},
				templateList: [],
				parentId: null
			};
		},
		onLoad() {
			this.initList()
			this.initPageData()
		},
		methods: {
			initPageData() {
				let params = {
					userId: this.$store.state.userInfo.userId,
					typeName: '定制攻略'
				}
				serviceTypeList(params).then(res => {
					console.log(res.data);
					if (res.data.code == 200 && res.data.rows.length > 0) {
						this.queryParams.peopleCount = res.data.rows[0].userCount
						this.queryParams.price = res.data.rows[0].userMoney
						this.selectedTemplateContent = res.data.rows[0].description
						this.parentId = res.data.rows[0].id
					}
				})
			},
			initList() {
				// serviceType  参数   1 ： 地陪 2：  定制  3：  质询
				let params = {
					serviceType: 2
				}
				clientServiceList(params).then(res => {
					console.log(res.data);
					if (res.data.code == 200) {
						this.templateList = res.data.rows
					}
				})
			},
			// 选择模板
			selectTemplate(index) {
				// 如果点击已选中的模板，则取消选中
				if (this.selectedTemplateIndex === index) {
					this.selectedTemplateIndex = -1;
					this.selectedTemplateContent = '';
				} else {
					this.selectedTemplateIndex = index;
					this.selectedTemplateContent = this.templateList[index].content;
				}
			},
			decreasePeople() {
				if (this.queryParams.peopleCount > 0) {
					this.queryParams.peopleCount--;
				}
			},
			increasePeople() {
				this.queryParams.peopleCount++;
			},
			handleClear() {
				uni.showModal({
					title: '提示',
					content: '确定要清空所有内容吗？',
					success: (res) => {
						if (res.confirm) {
							this.queryParams.peopleCount = 0;
							this.selectedTemplateIndex = -1;
							this.selectedTemplateContent = '';
							this.queryParams.price = '';
							uni.showToast({
								title: '已清空',
								icon: 'none'
							});
						}
					}
				});
			},
			// 新增方法：立即上架
			handlePublish() {
				// 验证必填项
				if (!this.queryParams.price) {
					uni.showToast({
						title: '请输入价格',
						icon: 'none'
					});
					return;
				}

				if (!this.selectedTemplateContent) {
					uni.showToast({
						title: '请输入定制攻略描述',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '提示',
					content: '确定要立即上架吗？',
					success: (res) => {
						if (res.confirm) {
							// 这里调用上架API
							let params = {
								userId: this.$store.state.userInfo.userId,
								typeName: '定制攻略',
								userMoney: this.queryParams.price,
								description: this.selectedTemplateContent,
								userCount: this.queryParams.peopleCount,
								isActive: 1,
								id: this.parentId ? this.parentId : null
							}
							serviceType(params).then(res => {
								if (res.data.code == 200) {
									uni.showToast({
										title: '上架成功',
										icon: 'none'
									});
									// 上架成功后可以跳转页面或重置表单
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}
							})
						}
					}
				});
			},
			handleSave() {
				// 验证必填项
				if (!this.queryParams.price) {
					uni.showToast({
						title: '请输入价格',
						icon: 'none'
					});
					return;
				}

				if (!this.selectedTemplateContent) {
					uni.showToast({
						title: '请输入定制攻略描述',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '提示',
					content: '确定要保存吗？',
					success: (res) => {
						if (res.confirm) {
							// 这里调用上架API
							let params = {
								userId: this.$store.state.userInfo.userId,
								typeName: '定制攻略',
								userMoney: this.queryParams.price,
								description: this.selectedTemplateContent,
								userCount: this.peopleCount,
								isActive: 0
							}
							serviceType(params).then(res => {
								console.log(res);
								if (res.data.code == 200) {
									// 保存逻辑
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
									// 上架成功后可以跳转页面或重置表单
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}
							})
						}
					}
				});

			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-top: 1rpx;

		.card {
			margin: 40rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

			.card-content {
				padding: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card-header {
					display: flex;
					align-items: center;
					flex-shrink: 0;
					margin-right: 30rpx;

					.card-content-line {
						width: 10rpx;
						height: 30rpx;
						background-color: #FE7131;
						border-radius: 4rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					.card-content-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						white-space: nowrap;
						flex-shrink: 0;
					}

					.required-mark {
						color: #FE7131;
						font-size: 32rpx;
						flex-shrink: 0;
						margin-left: 8rpx;
					}
				}

				.price-input-container {
					display: flex;
					align-items: center;
					background-color: #f8f8f8;
					border-radius: 12rpx;
					padding: 0 24rpx;
					flex: 1;
					min-width: 0;
					height: 70rpx;

					.currency-symbol {
						font-size: 36rpx;
						color: #333;
						margin-right: 10rpx;
						flex-shrink: 0;
						font-weight: bold;
					}

					.price-input {
						flex: 1;
						font-size: 36rpx;
						color: #333;
						min-width: 0;
					}

					.price-unit {
						font-size: 28rpx;
						color: #999;
						flex-shrink: 0;
						margin-left: 10rpx;
					}
				}
			}

			.description-section {
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card-header {
					display: flex;
					align-items: center;
					flex-shrink: 0;
					margin-right: 30rpx;

					.card-content-line {
						width: 10rpx;
						height: 30rpx;
						background-color: #FE7131;
						border-radius: 4rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					.card-content-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						white-space: nowrap;
						flex-shrink: 0;
					}

					.required-mark {
						color: #FE7131;
						font-size: 32rpx;
						flex-shrink: 0;
						margin-left: 8rpx;
					}
				}

				.card-right-tags {
					display: flex;
					justify-content: flex-end;

					.tag-item {
						border: 1rpx solid #BFBFBF;
						border-radius: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						padding: 0 10rpx;
						height: 40rpx;
						line-height: 40rpx;
						margin-left: 10rpx;
						flex-shrink: 0;
						transition: all 0.3s;
					}

					.tag-item.active {
						background-color: #FFA704;
						color: white;
						border-color: #FFA704;
					}
				}
			}

			.templateContent {
				padding: 0 30rpx 40rpx;
			}

			.description-textarea {
				width: 100%;
				height: 180rpx;
				background-color: #F3F2F2;
				border-radius: 20rpx;
				padding: 20rpx 40rpx;
				font-size: 26rpx;
				line-height: 1.5;
				box-sizing: border-box;
				color: #4D4D56;
				border: none;
				resize: none;
			}

			.word-count {
				text-align: right;
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
			}
		}


		.footer-card {
			margin: 40rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			padding: 30rpx 0;

			.card-content {
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%; // 添加这行

					.card-header-left {
						display: flex;
						align-items: center; // 添加这行
						flex-shrink: 0; // 添加这行
					}

					.card-content-line {
						width: 10rpx;
						height: 30rpx;
						background-color: #FE7131;
						border-radius: 4rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					.card-content-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						white-space: nowrap;
						flex-shrink: 0;
					}

					.people-counter {
						display: flex;
						align-items: center;
						gap: 20rpx;
						flex-shrink: 0;

						.counter-btn {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							background-color: #f5f5f5;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 32rpx;
							font-weight: 600;
							color: #666;
							cursor: pointer;
							transition: all 0.2s ease;
							border: 2rpx solid #f5f5f5; // 改为固定边框
							box-sizing: border-box; // 添加这个

							&:active {
								background-color: #ebebeb;
								border-color: #ebebeb; // 保持边框颜色一致
								// 移除 transform: scale(0.95)
							}
						}

						.counter-btn:first-child {
							color: #999;
							font-weight: 500;
						}

						.counter-btn:last-child {
							color: #FE7131;
						}

						.counter-number {
							min-width: 60rpx;
							height: 48rpx;
							background-color: #f8f8f8;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 32rpx;
							font-weight: 600;
							color: #333;
							border-radius: 24rpx;
							border: 2rpx solid #f0f0f0;
							box-sizing: border-box; // 添加这个
						}
					}
				}
			}

			.card-footer {
				font-size: 26rpx;
				font-weight: 400;
				color: #4D4D56;
				margin-left: 50rpx;
				margin-top: 14rpx;
			}
		}

		.footer-tip {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx;
			font-size: 24rpx;
			color: #999;
			text-align: center;

			.required-mark {
				color: #FE7131;
				font-size: 32rpx;
				flex-shrink: 0;
				margin-left: 8rpx;
			}
		}

		// 新增底部按钮样式
		.bottom-buttons {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 20rpx 30rpx;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);

			.button-group {
				display: flex;
				align-items: center;
				justify-content: space-between; // 两端对齐

				.save-button {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100rpx;
					height: 80rpx;
					border-radius: 40rpx;
					background: #fff;
					transition: all 0.3s;

					&:active {
						background: #f8f8f8;
					}

					.save-icon {
						width: 36rpx;
						height: 36rpx;
						margin-bottom: 8rpx;
					}

					.save-text {
						font-size: 24rpx;
						color: #666;
						font-weight: 500;
					}
				}

				.right-buttons {
					display: flex;
					align-items: center;
					gap: 20rpx;
					justify-content: flex-end; // 右对齐
				}

				.button {
					width: 180rpx;
					height: 60rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: bold;
					transition: all 0.3s;
				}

				.clear-btn {
					background: #CBCBCB;
					color: #fff;

					&:active {
						background: #b8b8b8;
					}
				}

				.publish-btn {
					background: linear-gradient(135deg, #FE7131, #FFA704);
					color: #fff;
					border: none;

					&:active {
						opacity: 0.9;
						transform: translateY(2rpx);
					}
				}
			}
		}
	}
</style>